<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container" style="margin: 10px 0 10px 0;" v-permission="'/blogCategory/getList'">
      <el-row>
        <el-input clearable @keyup.enter.native="handleFind" class="filter-item"
                  style="width: 200px;" v-model="queryParams.keyword" placeholder="请输入分类名">
        </el-input>

        <el-button class="filter-item" type="primary" icon="el-icon-search"
                   v-permission="'/blogCategory/getList'"
                   @click="handleFind" >查找
        </el-button>

        <el-button class="filter-item" type="primary" @click="handleAdd"
                   icon="el-icon-edit" v-permission="'/blogCategory/add'">添加分类
        </el-button>

        <el-button class="filter-item" type="danger" @click="handleDeleteBatch"
                   :disabled="this.multipleSelection.length <= 0"
                   icon="el-icon-delete" v-permission="'/blogCategory/deleteBatch'">删除选中
        </el-button>

        <el-button class="filter-item" type="info" @click="handlerBlogCategoryByClickCount"
                   icon="el-icon-document" v-permission="'/blogCategory/blogCategoryByClickCount'">点击量排序
        </el-button>
        <el-button class="filter-item" type="info" @click="handleblogCategoryByCite"
                   icon="el-icon-document" v-permission="'/blogCategory/blogCategoryByCite'"> 引用量排序
        </el-button>
      </el-row>
    </div>

    <el-table :data="tableData" style="width: 100%;" @select="handleSelectionChange">
      <el-table-column type="selection"></el-table-column>
      <el-table-column label="序号" type="index" width="60" align="center">

      </el-table-column>

      <el-table-column label="分类名" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.categoryName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="分类介绍" width="300" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.content }}</span>
        </template>
      </el-table-column>

      <el-table-column label="点击数" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.clickCount }}</span>
        </template>
      </el-table-column>

      <el-table-column label="排序" align="center">
        <template slot-scope="scope">
          <el-tag type="warning">{{ scope.row.sort }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="创建时间" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>

      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <template v-if="scope.row.status == 1">
            <span>正常</span>
          </template>
          <template v-if="scope.row.status == 2">
            <span>推荐</span>
          </template>
          <template v-if="scope.row.status == 0">
            <span>已删除</span>
          </template>
        </template>
      </el-table-column>

      <el-table-column label="操作" fixed="right" align="center" min-width="230">
        <template slot-scope="scope">
          <el-button @click="handleStick(scope.row)" type="warning" size="small" v-permission="'/blogCategory/stick'">
            置顶
          </el-button>
          <el-button @click="handleEdit(scope.row)" type="primary" size="small" v-permission="'/blogCategory/edit'">编辑
          </el-button>
          <el-button @click="handleDelete(scope.row)" type="danger" size="small" v-permission="'/blogCategory/delete'">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>


    <pagination v-show="total>0" :total="total" :page.sync="queryParams.currentPage"
                :limit.sync="queryParams.pageSize"
                @pagination="handleCurrentChange"/>
    <!-- 添加或修改对话框 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="分类名" :label-width="formLabelWidth" prop="categoryName">
          <el-input v-model="form.categoryName" auto-complete="off"></el-input>
        </el-form-item>

        <el-form-item label="分类介绍" :label-width="formLabelWidth" prop="content">
          <el-input v-model="form.content" auto-complete="off"></el-input>
        </el-form-item>

        <el-form-item label="排序" :label-width="formLabelWidth" prop="sort">
          <el-input v-model="form.sort" auto-complete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getBlogCategoryList,
  addBlogCategory,
  editBlogCategory,
  deleteBatchBlogCategory,
  deleteBlogCategoryById,
  stickBlogCategory,
  blogCategoryByClickCount,
  blogCategoryByCite
} from "@/api/blog/blogCategory";
import {formatData} from "@/utils/webUtils";

export default {
  data() {
    return {
      multipleSelection: [], //多选，用于批量删除
      tableData: [],
      queryParams: {
        currentPage: 1,
        pageSize: 10,
        keyword: ''
      },

      total: 0, //总数量
      title: "增加分类",
      dialogFormVisible: false, //控制弹出框
      formLabelWidth: "120px",
      isEditForm: false,
      form: {
        uid: null,
        content: "",
        categoryName: ""
      },
      rules: {
        categoryName: [
          {required: true, message: '分类名称不能为空', trigger: 'blur'},
          {min: 1, max: 10, message: '长度在1到10个字符'},
        ],
        sort: [
          {required: true, message: '排序字段不能为空', trigger: 'blur'},
          {pattern: /^[0-9]\d*$/, message: '排序字段只能为自然数'},
        ]
      }
    };
  },
  created() {
    this.blogCategoryList();
  },
  methods: {
    blogCategoryList: function () {

      let params = this.queryParams
      getBlogCategoryList(params).then(response => {
        this.tableData = response.data.records;
        this.currentPage = response.data.current;
        this.pageSize = response.data.size;
        this.total = response.data.total;
      });
    },
    getFormObject: function () {
      let formObject = {
        uid: null,
        content: null,
        categoryName: null,
        sort: 0
      };
      return formObject;
    },
    handleFind: function () {
      this.blogCategoryList();
    },
    handleAdd: function () {
      this.title = "增加分类"
      this.dialogFormVisible = true;
      this.form = this.getFormObject();
      this.isEditForm = false;
    },
    // 通过点击量排序
    handlerBlogCategoryByClickCount: function () {
      this.$confirm(
        "此操作将根据点击量对所有的标签进行降序排序, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          blogCategoryByClickCount().then(response => {
            if (response.code == this.$ECode.SUCCESS) {
              this.blogCategoryList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消批量排序"
          });
        });
    },
    // 通过点击量排序
    handleblogCategoryByCite: function () {
      this.$confirm(
        "此操作将根据博客引用量对所有的标签进行降序排序, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          blogCategoryByCite().then(response => {
            if (response.code == this.$ECode.SUCCESS) {
              this.blogCategoryList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消批量排序"
          });
        });
    },
    handleEdit: function (row) {
      this.title = "编辑分类"
      this.dialogFormVisible = true;
      this.isEditForm = true;
      this.form = row;
    },
    handleStick: function (row) {
      this.$confirm("此操作将会把该标签放到首位, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          var params = {};
          params.uid = row.uid;
          stickBlogCategory(params).then(response => {
            if (response.code == this.$ECode.SUCCESS) {
              this.blogCategoryList();
              this.$message({
                type: "success",
                message: response.data
              });
            } else {
              this.$message({
                type: "error",
                message: response.data
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消置顶"
          });
        });
    },
    handleDelete: function (row) {
      let that = this;
      this.$confirm("此操作将把分类删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {

          deleteBlogCategoryById(row.uid).then(response => {
            if (response.code == this.$ECode.SUCCESS) {
              this.$message({
                type: "success",
                message: response.data
              });
            } else {
              this.$message({
                type: "error",
                message: response.data
              });
            }
            that.blogCategoryList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    handleDeleteBatch: function () {
      let that = this;
      if (that.multipleSelection.length <= 0) {
        this.$message({
          type: "error",
          message: "请先选中需要删除的内容！"
        });
        return;
      }
      this.$confirm("此操作将把选中的分类删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteBatchBlogCategory(that.multipleSelection).then(response => {
            if (response.code === this.$ECode.SUCCESS) {
              this.$message({
                type: "success",
                message: response.data
              });
            } else {
              this.$message.error(response.data);
            }
            that.blogCategoryList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    handleCurrentChange: function (val) {
      this.currentPage = val;
      this.blogCategoryList();
    },
    submitForm: function () {

      this.$refs.form.validate((valid) => {
        if (!valid) {
          console.log('校验失败')
          return;
        } else {
          if (this.isEditForm) {
            editBlogCategory(this.form).then(response => {
              console.log(response);
              if (response.code === this.$ECode.SUCCESS) {
                this.$message({
                  type: "success",
                  message: response.data
                });
                this.dialogFormVisible = false;
                this.blogCategoryList();
              } else {
                this.$message({
                  type: "error",
                  message: response.data
                });
              }
            });
          } else {
            addBlogCategory(this.form).then(response => {
              console.log(response);
              if (response.code === this.$ECode.SUCCESS) {
                this.$message({
                  type: "success",
                  message: response.data
                });
                this.dialogFormVisible = false;
                this.blogCategoryList();
              } else {
                this.$message({
                  type: "error",
                  message: response.data
                });
              }
            });
          }
        }
      })
    },
    // 改变多选
    handleSelectionChange(val) {
      let ids = []
      val.forEach(data => {
        ids.push(data.uid)
      })
      this.multipleSelection=ids;
    }
  }
};
</script>
